<template>
  <scroll-view class="home" scroll-y :refresher-enabled="true">
    <view class="header-swiper">
      <CustomNavbarHome :left="0" :bg="navStyle.bgColor">
        <view class="cust_nav">
          <view class="navbarTitle gradient-text">
            {{ navbarTitle }}
          </view>
          <view @click="toRouter" class="message">
            <u-icon name="bell" size="16" color="white" bold></u-icon>
          </view>
        </view>
      </CustomNavbarHome>
      <view class="search-box">
        <u--input
          placeholder="Search"
          border="surround"
          v-model="searchValue"
          @change="searchHandler"
          class="search-input"
          placeholderClass="placeholderClass"
          @focus="toRouter"
        >
          <!-- <image src="../../static/images/search.png" slot="prefix" class="search-icon" /> -->
        </u--input>
      </view>
    </view>
    <view class="divider" style="height: 40rpx"></view>
    <view class="home-body">
      <view class="h1-title gradient-text ml-23">Love After Marriag</view>
      <u-scroll-list class="newList" :indicator="false">
				<view v-for="(item, index) in newList" class="item" :key="index"
					@click="openVideoDetail(item.id, item.title, item.image, item.description)">
					<image :src="item.image" class="img"></image>
					<view class="info">
						<view class="title u-line-1">{{ item.title }}</view>
						<view class="text u-line-1">{{ item.description }}</view>
					</view>
				</view>
			</u-scroll-list>
			<view class="h1-title gradient-text ml-23">New Release</view>
			<u-scroll-list class="newList" :indicator="false">
				<view v-for="(item, index) in favoriteList" class="item" :key="index"
					@click="openVideoDetail(item.id, item.title, item.image, item.description)">
					<image :src="item.image" class="img"></image>
					<view class="info">
						<view class="title u-line-1">{{ item.title }}</view>
						<view class="text u-line-1">{{ item.description }}</view>
					</view>
				</view>
			</u-scroll-list>
    </view>
    <!-- <view class="divider" style="height: 180rpx;background-color:red"></view> -->
    <!-- </u-skeleton> -->
  </scroll-view>
</template>

<script>
const notVideoUrls = ['我是机', '恋爱自由', '该吃药了', '我是老板']
import CustomNavbarHome from '../../components/CustomNavbar-home.vue'
export default {
  name: '',
  components: { CustomNavbarHome },
  data() {
    return {
      StatusBarHeight: 0,
      // 状态栏的高度

      TitleBarHeight: 0,
      // 导航标题栏的高度
      navStyle: {
        marginLeft: 50,
        bgColor: '#241e42',
        transform: -50,
        searchText: 'none',
        searchWidth: 'auto'
      },
      loadText: {
        loadmore: 'loadmore',
        loading: 'loading',
        nomore: 'no more'
      },
      navbarTitle: 'REELSHORT',
      current: 0,
      newList: [],
      addBanner: [],
      favoriteList: [],
      contentList: [],
      refreshStatus: true,
      isRefresh: false,
      isMore: 'nomore',
      pageNo: 1,
      pageTotal: 0,
      skeletonLoading: true,
      boxRefreshLoading: false,
      navHeight: 0,
      swiperMargin: 0,
      searchValue: ''
    }
  },
  computed: {
    bgImage() {
      return this.addBanner[this.current].image
    },
    swiperHeight() {
      return `calc(100vh - 500rpx - ${uni.$u.addUnit(
        uni.$u.getPx(uni.$u.props.navbar.height) + uni.$u.sys().statusBarHeight,
        'px'
      )})`
    }
  },
  created() {
    // 在进入页面时就应该获取到设备的状态栏高度，所以使用onload
    let that = this
    // 设置this指向，避免出现问题
    uni.getSystemInfo({
      // uniapp提供的判断平台的api，具体参考：https://uniapp.dcloud.io/api/system/info?id=getsysteminfo
      success: function (res) {
        // 调用成功的回调函数

        if (res.model.indexOf('iPhone') !== -1) {
          // 判断设备型号,此处仅判断手机型号是不是iPhone,
          // 因为iPhone的导航标题栏高度是44px,而其他设备多为48px（注意，这里是 px 而不是 rpx）

          that.TitleBarHeight = 44 + 'px'
          // 根据判断改变导航标题栏的高度，iPhone手机
        } else {
          that.StatusBarHeight = 48 + 'px'
          // 非iPhone手机
        }
        that.StatusBarHeight = res.statusBarHeight + 'px'
        // 获取到的设备状态栏高度，然后将值赋予想对应的对象，以改变对应的状态栏高度

        console.log(that.StatusBarHeight)
        console.log(that.TitleBarHeight)
      }
    })
  },
  onUnload() {
    console.log('onUnload', 'sohuye')
  },
  async onShow() {
    this.navHeight = uni.$u.addUnit(
      uni.$u.getPx(uni.$u.props.navbar.height) + uni.$u.sys().statusBarHeight,
      'px'
    )
    this.swiperMargin = uni.$u.sys().screenWidth - 610 / 2
    // console.log(uni.$u.sys(), uni.$u,' swiperMargin');
    await this.$onLaunched
  },
  async onLoad() {
    await this.$onLaunched
    this.init()
  },
  onPageScroll(e) {
    // let navHeight = this.$u.addUnit($u.getPx('44px') + this.$u.sys().statusBarHeight,'px')
    // if (e.scrollTop > 50) {
    // 	let a = e.scrollTop / 300
    // 	let b = 50 - a * 40
    // 	if (b >= 0) {
    // 		this.navStyle.marginLeft = b
    // 		this.navStyle.transform = -b
    // 	}
    // 	this.navStyle.bgColor = `rgba(0,0,0, ${a > 1 ? 1 : a})`
    // 	let w = e.scrollTop / 10
    // 	if (w <= 50) {
    // 		if (w >= 35) {
    // 			this.navStyle.searchText = 'block'
    // 		} else {
    // 			// this.navStyle.searchText = 'none'
    // 		}
    // 		this.navStyle.searchWidth = w + '%'
    // 	}
    // 	// this.navStyle.searchText = 'block'
    // } else {
    // 	this.navStyle.bgColor = 'transparent'
    // 	this.navStyle.marginLeft = 50
    // 	this.navStyle.transform = -50
    // 	this.navStyle.searchWidth = 'auto'
    // 	this.navStyle.searchText = 'none'
    // }
  },
  onReachBottom() {
    if (this.contentList.length < this.pageTotal) {
      ++this.pageNo
      this.getVideoList(false)
    }
  },
  methods: {
    searchHandler(val) {
      console.log(val, 'searchHandler')
    },
    toRouter() {
      this.jumpView('/pages/video/search')
    },
    clickBanner(e) {
      let item = this.addBanner[e]
      this.openVideoDetail(item.id, item.title, item.image, item.description)
      //   const obj = { ...item }
      // this.jumpView(`/pages/videoWebView/index?id=${item.id}&d=${JSON.stringify(obj)}`)
    },
    init() {
      this.$request('video.addonsIndex')
        .then((resp) => {
          this.newList = resp.data.new.filter((v) => !notVideoUrls.includes(v.title))
          this.addBanner = resp.data.recommend.filter((v) => !notVideoUrls.includes(v.title))
          this.favoriteList = resp.data.favorite.filter((v) => !notVideoUrls.includes(v.title))
          this.boxRefreshLoading = false
        })
        .catch(() => {
          this.boxRefreshLoading = false
        })
      this.getVideoList()
    },
    getVideoList(refresh = true) {
      const vm = this
      if (refresh) {
        this.pageNo = 1
      }
      this.$request('video.allAddons', {
        current: this.pageNo,
        pageSize: 10
      }).then((resp) => {
        this.pageTotal = resp.data.total
        if (resp.data.records && resp.data.records.length) {
          const list = resp.data.records.filter((v) => !notVideoUrls.includes(v.title))
          console.log('getVideoList:', vm.pageTotal, list)
          vm.contentList = refresh ? list : [...vm.contentList, ...list]
          vm.isMore = 'loadmore'
          if (vm.pageTotal == vm.contentList.length) {
            vm.isMore = 'nomore'
          } else {
            vm.isMore = 'loadmore'
          }
        } else {
          vm.isMore = 'nomore'
        }
        // this.skeletonLoading = false
      })
    },
    boxRefreshHandle() {
      this.boxRefreshLoading = true
      this.init()
    },
    // 下拉刷新
    refreshHandle() {
      this.refreshStatus = true
      if (!this.isRefresh) {
        this.isRefresh = true
        this.filter.current = 1
        this.contentList[this.contentCurrent].list = []
        this.getVideoList()
      }
    },
    // 滚动监听
    scrollHandle(e) {
      // if (this.contentCurrent == 0) {
      // 	this.isTabsFixed = e.detail.scrollTop > 200 ? true : false
      // }
      // if (e.detail.scrollTop > 50) {
      // 	let a = e.detail.scrollTop / 300
      // 	let b = 50 - a * 40
      // 	if (b >= 0) {
      // 		this.navStyle.marginLeft = b
      // 		this.navStyle.transform = -b
      // 	}
      // 	this.navStyle.bgColor = `rgba(0,0,0, ${a > 1 ? 1 : a})`
      // 	let w = e.detail.scrollTop / 10
      // 	// console.log('wwww1', w)
      // 	if (w <= 60) {
      // 		// console.log('wwww', w)
      // 		if (w >= 35) {
      // 			this.navStyle.searchText = 'block'
      // 		} else {
      // 			// this.navStyle.searchText = 'none'
      // 		}
      // 		this.navStyle.searchWidth = w + '%'
      // 	}
      // 	// this.navStyle.searchText = 'block'
      // } else {
      // 	this.navStyle.bgColor = 'transparent'
      // 	this.navStyle.marginLeft = 50
      // 	this.navStyle.transform = -50
      // 	this.navStyle.searchWidth = 'auto'
      // 	this.navStyle.searchText = 'none'
      // }
    },
    // 触底滚动
    boxBottomHandle() {
      // console.log(123, 'this.originIndex == this.originData.length - 1')
      ++this.pageNo
      this.getVideoList(false)
    }
  }
}
</script>

<style>

</style>
<style lang="scss" scoped>
.ml-23{
  margin-left: 23rpx;
}
.placeholderClass {
  color: rgba(255, 255, 255, 0.34);
  font-family: Myriad Pro;
  font-weight: 400;
  font-size: 31rpx;
}
.search-box {
  margin: 46rpx auto 0;
  width: 683rpx;
  height: 96rpx;
  background: linear-gradient(-60deg, #a2c15f, #8ac017);
  border-radius: 10rpx;
  display: flex;
  align-items: center;
  padding: 3rpx;
  .search-input {
    height: 100%;
    background-color: #243740;
    font-family: Myriad Pro;
    font-weight: 400;
    font-size: 31rpx;
    color: #FFFFFF;
    padding-left: 42rpx !important;
    .search-icon{
      width: 38rpx;
      height: 37rpx;
      margin-right: 14rpx;
    }
  }
}
.navbarTitle {
  margin-left: 58rpx;
  font-family: Myriad Pro;
  font-weight: bold;
  font-size: 40rpx;
  color: #fdfdfd;
  line-height: 73rpx;
}

.cust_nav {
  padding: 0 20rpx;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  font-size: 36rpx;
  font-weight: 500;
  color: #fff;
  display: flex;
  align-items: center;
  // justify-content: space-around;
  .message {
    width: 49rpx;
    height: 49rpx;
    background: linear-gradient(-60deg, #a2c15f, #8ac017);
    border-radius: 19rpx;
    margin-left: auto;
    margin-right: 69rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.search {
  position: absolute;
  right: 20rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  margin: 35rpx 0;
  // z-index: 999999999;
  // height: 65rpx;
  min-width: 100rpx;

  // background-color: red;
  &.searchBox {
    // height: 65rpx;
    border-radius: 39rpx;
    background-color: white;
    margin-left: 38rpx;
    color: #666666;
    margin-left: 16rpx;
    overflow: hidden;
  }

  .search-icon {
    width: 40rpx;
    height: 40rpx;
    color: #000;
  }

  .text {
    margin-left: 10rpx;
    font-size: 28rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #666666;
  }
}

.home {
  height: 100vh;
	overflow-y: scroll;
}

.header-swiper {
  // min-height: calc(100vh - 600rpx);
  background-size: 600000px;
  background-position: top center;
  background-repeat: no-repeat;
  // background-color: #000;

  // height: 100%;
}

/deep/.u-swiper {
  overflow: initial;
  margin-top: 25rpx;

  .u-swiper__indicator {
    bottom: -38rpx;
  }
}

.home-body {
  padding: 0 30rpx 30rpx;
  // display: flex;
  // flex-direction: column;
  overflow-y: scroll;
  // height: 100vh;

  .newList {
    margin-top: 30rpx;

    .item {
      width: 280rpx;
      margin-bottom: 40rpx;
      margin-right: 25rpx;
      // @include flex(column);
      // flex-direction: row;
      .img {
        width: 280rpx;
        height: 371rpx;
        border-radius: 20rpx;
        overflow: hidden;

        .image {
          width: 100%;
          height: 100%;
        }
      }

      .info {
        margin-top: 16rpx;

        .title {
          font-family: PingFang SC;
          font-weight: bold;
          font-size: 30rpx;
          color: #FDFEFB;
          margin-top: 27rpx;
        }

        .text {
          font-size: 24rpx;
          color: #666;
          margin-top: 4rpx;
        }
      }
    }
  }
}

.indicator {
  @include flex(row);
  justify-content: center;

  &__dot {
    height: 11rpx;
    width: 11rpx;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.35);
    margin: 0 8rpx;
    transition: background-color 0.3s;

    &--active {
      background-color: #ffffff;
      width: 27.5rpx;
      border-radius: 5.5rpx;
    }
  }
}

.main_content {
  // overflow: hidden;
  margin-top: 30rpx;
  flex: 1;
  margin-bottom: 100rpx;

  .content_box {
    padding: 20rpx 0 20rpx 0;

    .list {
      display: flex;
      flex-wrap: wrap;

      .sitem {
        width: 100%;
        height: 516rpx;
        border-radius: 20rpx;
        overflow: hidden;
        display: flex;
        margin-bottom: 40rpx;

        .left {
          width: 52%;

          .image {
            width: 100%;
            height: 100%;
          }
        }

        .right {
          width: 48%;
          background: linear-gradient(0deg, rgba(35, 36, 40, 1) 0%, rgba(100, 105, 124, 1) 100%);
          padding: 30rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          color: #fff;

          .info {
            height: 100%;
            display: flex;
            flex-direction: column;

            .tbox {
              flex: 1;
            }

            .title {
              font-size: 32rpx;
              font-weight: 700;
            }

            .text {
              font-size: 24rpx;
              margin-top: 16rpx;
              color: #eee;
              line-height: 40rpx;
            }

            .text1 {
              flex: 1;
            }
          }

          .button {
            height: 70rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28rpx;
            background: #484b52;
            border-radius: 10rpx;
            margin-top: 16rpx;

            &.collect {
              opacity: 0.6;
            }

            &.active {
              background: rgba(#000, 0.2);
            }

            .text {
              margin-left: 8rpx;
            }
          }
        }
      }

      .item {
        flex: 0 0 219rpx;
        margin-bottom: 40rpx;
        margin-right: 20rpx;
        &:nth-of-type(3n) {
          margin-right: 0;
        }
        .img {
          width: 100%;
          height: 302rpx;
          border-radius: 20rpx;
          overflow: hidden;

          .image {
            width: 100%;
            height: 100%;
          }
        }

        .info {
          margin-top: 16rpx;

          .title {
            font-family: PingFang SC;
            font-weight: bold;
            font-size: 24rpx;
            color: #fdfefb;
          }

          .text {
            font-size: 24rpx;
            color: #666;
            margin-top: 4rpx;
          }
        }
      }
    }

    .nodata {
      padding: 15vh 0;
    }

    // .item1 {

    // 	&:nth-child(10n),
    // 	&:nth-child(2n) {
    // 		margin-right: 0;
    // 	}
    // }
  }
}
</style>
